<template>
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader />
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="area-container right-area">
              <el-row style="height: 100%; flex-direction: column; display: flex;">
                <!-- 上部分区域 -->
                <el-col :span="24" style="height: auto; flex: none;">
                  <div class="top-section">
                    <div class="lab-header-title" v-if="activeTab=='content'">
                      <span class="highlight">关键词搜索排名</span>
                    </div>
                    <div class="lab-header-title" v-if="activeTab=='hotSearchWord'">
                      <span class="highlight">精准挖掘海量热搜词</span>
                    </div>
                    <div class="lab-header-title" v-if="activeTab=='account'">
                      <span class="highlight">一键精准查找对标账号</span>
                    </div>
                    <div class="lab-header-row">
                      <template v-for="tab in tabList" :key="tab.key">
                        <span
                          class="lab-header-tab"
                          :class="{ active: activeTab === tab.key }"
                          @click="handleTabClick(tab.key)"
                        >
                          {{ tab.label }}
                        </span>
                      </template>
                    </div>
                  </div>
                </el-col>
                <!-- 间隔区域 -->
                <div style="height: 32px;"></div>
                <!-- 下部分区域 -->
                <el-row style="flex: 1; width: 100%;">
                  <el-col :span="2"></el-col>
                  <el-col :span="20">
                    <div class="bottom-section">
                      <Content v-if="activeTab === 'content'" />
                      <Account v-else-if="activeTab === 'account'" />
                      <HotSearchWord v-else-if="activeTab === 'hotSearchWord'" />
                    </div>
                  </el-col>
                </el-row>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import {ArrowDown} from '@element-plus/icons-vue'
import Content from '../internetTraffic/Content.vue'
import Account from '../internetTraffic/Account.vue'
import HotSearchWord from '../internetTraffic/HotSearchWord.vue';
import MyHeader from '../common/MyHeader.vue';
import utils from '../../utils/utils'

// 网站背景图
const website_bg_url = ref('')
// 网站logo
const website_logo = ref('')
// 本页菜单
const page_menu_list = ref([])

const theme = ref(utils.getTheme());

// tab切换相关
const tabList = [
  { key: 'content', label: '内容' },
  { key: 'hotSearchWord', label: '热搜词' },
  { key: 'account', label: '账号' },
]
const activeTab = ref('content')
const handleTabClick = (key: string) => {
  activeTab.value = key
}

// 切换菜单展开/收起
const toggleMenu = (menu: any) => {
  menu.isExpanded = !menu.isExpanded
}

// 处理子菜单点击
const handleChildClick = (child: any) => {
  console.log('子菜单点击:', child)
  // 这里添加子菜单点击的处理逻辑
}

onMounted(() => {
  initWebsiteBgUrl()
  initPageMenuList()
})

//读取配置，获取网站背景图和网站logo
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
    website_logo.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_logo || ''
  }
}

// 获取本页菜单
const initPageMenuList = async () => {
  const response = await axiosUtil.post('api/storeintopieces/classifylist', {})
  if (response.data.code === 1 && response.data.data) {
    page_menu_list.value = response.data.data
  }
}
</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-main {
  padding: 20px;
  height: 90vh;
  overflow-x: hidden;
}

.el-row {
  height: 100%;
  margin: 0 !important;
  /* 新增：允许flex子项收缩 */
  min-height: 0;
}

.el-col {
  height: 100%;
  /* 新增：允许flex子项收缩 */
  min-height: 0;
}

.area-container {
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 15px;
}

.area-container:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.menu-container {
  overflow-y: auto;
}

.center-area, .right-area {
  min-height: 70vh;
}

.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item {
  margin-bottom: 15px;
}

.parent-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.parent-menu:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.expand-icon {
  transition: transform 0.3s ease;
  color: #fff;
}

.expand-icon.is-expanded {
  transform: rotate(180deg);
}

.child-menu {
  margin-top: 8px;
  padding: 5px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.child-item {
  padding: 10px 15px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.95em;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.child-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.child-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-section {
  height: 100%;
  /* 其他样式 */
  margin-bottom: 18px;
}
.bottom-section {
  height: 100%;
  /* 其他样式 */
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.lab-header-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  margin-bottom: 18px;
  line-height: 1.3;
}
.highlight {
  font-weight: 900;
}
.highlight-pic {
  color: #e85aad;
  font-weight: 900;
}
.lab-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
}
.lab-btn-main {
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 6px 22px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(161,140,209,0.12);
  transition: background 0.2s;
}
.lab-btn-main:hover {
  background: linear-gradient(90deg, #fbc2eb 0%, #a18cd1 100%);
}
.lab-header-tab {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 6px;
  padding: 2px 8px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.lab-header-tab.active {
  background: #d1b3fb;
  color: #fff;
}
.lab-header-tip {
  text-align: center;
  color: #999;
  font-size: 0.98rem;
  margin-top: 2px;
}
:deep(.el-radio-button__inner) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
}
:deep(.el-table__empty-text) {
  color: #fff;
}

</style>
